<template>
	<uni-popup ref="dialog" :type="type" :mask-click="mask" :is-mask-click="mask" @maskClick="handleMask">
		<view class="pay-box">
			<view class="body">
				<view v-if="title" class="title">{{ title }}</view>
				<view class="status-icon">
					<template v-if="status">
						<image :src="statusIcon" mode=""></image>
					</template>
					<template v-else>
						<slot name="statusIcon"></slot>
					</template>
				</view>
				<slot></slot>
			</view>
			<view class="dialog-footer flex-between">
				<template v-if="showCancel">
					<m-button style="flex: 1;" block class="m-button" gap="15 0" wh="l" type="disabled" radius="10"
						@click="handleCancel">{{ cancelText }}</m-button>
				</template>
				<template v-if="showConfirm">
					<m-button  style="flex: 1;"  block class="m-button" gap="15 0" wh="l" :loading="isLoading" radius="10"
						@click="handleConfirm">{{ confirmText }}</m-button>
				</template>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	import props from './props.js';
	import { mapState } from 'vuex'
	import md5 from 'js-md5'
	export default {
		name: "m-dialog",
		mixins: [props],
		watch: {
			loading(val) {
				this.isLoading = val;
			},
			value(val) {
				if (val) {
					this.open();
				} else {
					setTimeout(() => {
						this.pwd = '';
					}, 100)
					this.loading = false;
					this.close();
				}
			},
		},
		data() {
			return {
				pwd: '',
				isLoading: false,
			};
		},
		mounted() {},
		computed: {
			statusIcon() {
				return {
					'success': '',
				} [this.status]
			}
		},
		methods: {
			open() {
				this.$refs.dialog.open();
			},
			close() {
				this.$refs.dialog.close();
			},
			async handleConfirm() {
				this.$emit("handleConfirm");
			},
			handleCancel() {
				this.$emit("input", false);
				this.$emit("handleCancel");
			},
			handleMask() {
				if (!this.mask) return
				this.$emit("input", false);
				this.$emit("handleCancel");
			},
		},
	};
</script>

<style lang="scss">
	.pay-box {
		width: 620rpx;
		padding: 0 30rpx 30rpx;
		border-radius: 20rpx;
		box-sizing: border-box;
		position: relative;
		z-index: 12;
		background: #fff no-repeat;
		background-size: 100% 600rpx;
		color: var(--text);

		.title {
			padding: 20rpx 0;
			text-align: center;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
			// border-bottom: 1rpx solid var(--border);
		}

		.status-icon {
			image {
				width: 188rpx;
				height: 167rpx;
			}
		}

		.body {
			padding: 20rpx 0rpx;

			/deep/ .form-Item {
				border: 1rpx solid #24dfa4;
			}
		}


		.dialog-footer {
			/deep/ .m-button {
				flex: 1;
			}

			.m-button+.m-button {
				margin-left: 35rpx;
			}

			padding-top: 20rpx;
		}
	}
</style>